<template>
  <div class="page_root">
    <div class="page_left">
      <tabs-drawer
        :drawerList="drawerList"
        :currentIndex="currentIndex"
        @change="changeIndex"
      >
      </tabs-drawer>
    </div>
    <div class="page_right">
      <div v-show="currentIndex === 0">
        <system-info ref="systeminfo"></system-info>
      </div>
      <div v-show="currentIndex === 1">
        <host-configuration ref="hostconfiguration"></host-configuration>
      </div>
	  <div v-show="currentIndex === 2">
        <cloud-configuration ref="cloudconfiguration"></cloud-configuration>
      </div>
	  <div v-show="currentIndex === 3">
        <log-download ref="logdownload"></log-download>
      </div>
	  <div v-show="currentIndex === 4">
        <soft-upgrade ref="softupgrade"></soft-upgrade>
      </div>
    </div>
  </div>
</template>

<script>
import TabsDrawer from "@/components/TabsDrawer/index.vue";
import CloudConfiguration from "./subcomponents/CloudConfiguration.vue";
import HostConfiguration from "./subcomponents/HostConfiguration.vue";
import LogDownload from "./subcomponents/LogDownload.vue";
import SoftUpgrade from "./subcomponents/SoftUpgrade.vue"
import SystemInfo from "./subcomponents/SystemInfo.vue";

export default {
  components: {
    TabsDrawer,
    CloudConfiguration,
	HostConfiguration,
	LogDownload,
	SoftUpgrade,
	SystemInfo
  },
  data() {
    return {
      drawerList: [
        {
          index: 0,
          name: "系统信息",
        },
        {
          index: 1,
          name: "主机配置",
        },
		{
          index: 2,
          name: "云端配置",
        },

		{
          index: 3,
          name: "日志下载",
        },
		{
          index: 4,
          name: "软甲升级",
        },

      ],
      currentIndex: 0,
    };
  },
  methods: {
    loadData() {

      if (this.currentIndex === 0) {
        this.$refs.systeminfo.loadData();
      } else if(this.currentIndex === 1) {
        this.$refs.hostconfiguration.loadData();
      }
	  else if(this.currentIndex === 2) {
        this.$refs.cloudconfiguration.loadData();
      }
	  else if(this.currentIndex === 3) {
        this.$refs.logdownload.loadData();
      }
	  else if(this.currentIndex === 4) {
        this.$refs.softupgrade.loadData();
      }
    },

    changeIndex(index) {
      this.currentIndex = index;
      this.loadData();
    },
  },
};
</script>

<style lang="scss" scoped>
.page_root {
  display: flex;
  height: 100%;
  .page_right {
    flex: 1;
    & > div {
      height: 100%;
      width: 100%;
    }
  }
}
</style>